<template>
    <footer>
        <div @click="handle(index)" v-for="(item,index) in list" :key="index" :class="{active:currentIndex==index}">{{item.name}}</div>
    </footer>
</template>

<script>
export default {
    data(){
        return {
            currentIndex:0,
            list:[
                {name:'首页',status:false},{name:'爆爆团',status:false},{name:'订单',status:false},{name:'我的',status:false}
            ]
        }
    },
    methods:{
        handle(index){
            this.currentIndex=index
        }
    }
}
</script>

<style scoped>
    footer {
        width: 100%;
        height: 40px;
        background-color: #ccc;
        display: flex;
    }
    div {
        width: 100%;
        text-align: center;
        line-height: 40px;
        font-size: 20px;
        /* border-left: 1px solid #000; */
        box-sizing: border-box;
    }
    .active{
        color: blueviolet;
    }
</style>